<template>
  <div class="MacOrder-wrapper table-container">
    <el-card header="信创封神警告大屏" style="margin-bottom: 20px">
      <el-table
        :data="XCList"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="monitorCode" label="告警编号" width="180" />
        <el-table-column prop="startTime" label="告警开始时间" width="180" />
        <el-table-column prop="product" label="告警项" />
        <el-table-column prop="robot" label="机器人" />
        <el-table-column prop="level" label="告警等级" />
        <el-table-column prop="title" label="告警名称" />
        <el-table-column prop="lasttime" label="告警持续时间" />
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-popconfirm
              title="确定确认吗？"
              @onConfirm="updateStatus('xc', scope.row.id)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  v-if="scope.row.status === 0"
                  >点击确认</el-button
                >
                <el-button disabled plain type="info" size="small" v-else
                  >已确认</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card header="封神告警大屏" style="margin-bottom: 20px">
      <el-table
        :data="fs3List"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="cloudname" label="云环境" width="180" />
        <el-table-column prop="occurrenceTime" label="告警时间" width="180" />
        <el-table-column prop="alarmTitle" label="告警项" />
        <el-table-column prop="alarmMain" label="告警实例" />
        <el-table-column prop="alarmValue" label="告警详情" />
        <el-table-column prop="lasttime" label="告警持续时间" />
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-popconfirm
              title="确定确认吗？"
              @onConfirm="updateStatus('fs', scope.row.id)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  v-if="scope.row.status === 0"
                  >点击确认</el-button
                >
                <el-button disabled plain type="info" size="small" v-else
                  >已确认</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column label="备注详情" fixed="right">
          <template #default="scope">
            <el-input
              v-model="scope.row.notes"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              @change="inputChange(scope.row.id, scope.row.notes)"
            ></el-input> </template
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { xinChuangList, xcPick, fs3Pick, fs3Total, fs3NoteAdd } from '@/api/fenshen';

export default {
  $$route: {
    meta: {
      title: '表格',
      icon: 'fa-history',
      sort: 0
    }
  },
  components: {},

  data: () => {
    return {
      XCList: [],
      // ZTList: [],
      // QSHList: [],
      fs3List: [],
      timer: null,
      queryParams: {
        alarm_value: ''
      }
    };
  },
  computed: {},
  watch: {},
  // ------------------------------------------------------------------
  // pragma mark - Life Cycle(生命周期)
  // ------------------------------------------------------------------
  created() {
    this.createdInit();
    this.timer = setInterval(() => {
      this.createdInit();
    }, 5 * 60 * 1000)
  },
  mounted() {
  },
  destroyed() {
    clearInterval(this.timer)
  },

  methods: {
    // ------------------------------------------------------------------
    // pragma mark - inti(初始化行为)
    // ------------------------------------------------------------------
    createdInit() {
      this.loadDataXC();
      this.loadDataFs();
    },
    async loadDataXC() {
      let res = await xinChuangList()
      if (res.code == 1) {
        console.log('res: ', res);
        this.XCList = res.data

      }
    },
    async loadDataFs() {
      let res = await fs3Total()
      if (res.code == 1) {
        console.log('res: ', res);
        this.fs3List = res.data
      }
    },
    // async loadDataFsRecord() {
    //   let params = {
    //     alarm_value: this.queryParams.alarm_value
    //   }
    //   let res = await fs3NoteRecord(params)
    //   if (res.code == 1) {
    //     console.log('res: ', res);
    //     this.fs3List = res.data.list
    //   }
    // }, 
    // async loadDataReset() {
    //   this.queryParams.alarm_value = ''
    //   this.loadDataFs()
    // },
    // 更新列表按钮
    async updateStatus(type, id) {
      switch (type) {
        case 'xc':
          let res = await xcPick(id)
          if (res.code == 1) {
            this.loadDataXC()
          }
          break;
        case 'fs':
          let res2 = await fs3Pick(id)
          if (res2.code == 1) {
            this.loadDataFs()
          }
          break
      }
    },
    async inputChange(id, value) {
      let params = {
        notes: value,
        id: id
      }
      let res = await fs3NoteAdd(params)
      if (res.code == 1) {
        this.$message.success('备注已更新');
      }
    },
    tableRowClassName({ row }) {
      if (row.status == 0) {
        return 'warning-row';
      }
    }
  }
};
</script>
<style>
.warning-row {
  background-color: rgb(253, 226, 226) !important;
}
.hover-row {
  font-size: 20px;
  font-weight: 600;
}
</style>
<style scoped>
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.round {
  border-radius: 50%;
  background-color: #dddddd;
  line-height: 50px;
}
</style>
